<template>
  <div class="home-container f_c_m_c">
    <div class="content f_r_sb_c" v-for="item in List">
      <img :src="require(`@/assets/prize${item.good_type}.png`)" alt="" />
      <div class="flex-1 ml-20 f_c">
        <span class="font-28 mb-10">{{ item.good_title }}</span>
        <div class="f_r_sb_c">
          <div class="f_c">
            <span class="font-24 color_EA4237 mb-10" v-if="item.good_type == 2"
              >兑换码：{{ item.str || "空" }}</span
            >
            <span class="color_999 font-22"
              >兑换时间：{{ item.updated_at || "空" }}
            </span>
          </div>
          <div class="btns font-22 color_fff">
            <div
              v-if="item.status != 1 && item.good_type == 2"
              class="btn1"
              @click="copyToClipboard(item.str)"
            >
              复制兑换码
            </div>
            <div v-if="item.status != 1 && item.good_type != 2" class="btn1">
              {{ statusText[item.status] }}
            </div>
            <div v-if="item.status == 1" class="btn2">已完成</div>
          </div>
        </div>
      </div>
    </div>
    <div class="unList f_c_c_c" v-if="!List.length">
      <img :src="un_price_img" alt="" />
      <span class="font-20 color_999">暂无砍价记录~</span>
    </div>
    <div v-if="popupShow">
      <popupMore
        v-model="popupShow"
        :type="popupType"
        @sub="popupSub"
      ></popupMore>
    </div>
  </div>
  <!-- good_type 之前的是：1现金，2是Q币手机，3是手办，4是道具 -->
</template>

<script>
import { myPrize } from "@/api/goods";

import un_price_img from "@/assets/un_price.png";

export default {
  name: "myGoods",
  components: {},
  data() {
    return {
      un_price_img,
      statusText: ["发放中", "已完成", "兑换失败"],
      List: [
        // { good_type: 1,status:0},
        // { good_type: 2,status:0 },
        // { good_type: 3 ,status:0},
        // { good_type: 4 ,status:1},
      ],
      popupShow: false,
      popupType: 9,
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    getImg(e) {
      return "prize" + e + "Img";
    },
    popupSub() {},
    copyToClipboard(str) {
      this.$copyText(str).then(
        () => {
          this.$toast("复制成功");
        },
        () => {
          this.$toast("复制失败");
        }
      );
    },
    getList() {
      myPrize().then((res) => {
        let list = res.data;
        list.forEach((val, index) => {
          let time;
          if (val.status == 0) {
            time = val.created_at;
          } else {
            time = val.updated_at || val.created_at;
          }
          val.time = time.substr(0, 10);
          if (val.type == 2) {
            let types = ["3", "2", "1"];
            val.award_type = types[val.good_type - 1];
          }
        });
        this.List = list;
      });
    },
  },
};
</script>

<style scoped lang="scss">
.home-container {
  position: relative;
  background-color: #f0f0f0;
  .content {
    width: 672px;
    background: #ffffff;
    border-radius: 24px;
    margin-top: 30px;
    padding: 20px;
    box-sizing: border-box;
    > img {
      width: 100px;
      height: 100px;
    }
    .btns {
      > div {
        padding: 5px 20px;
        border-radius: 30px;
      }
      .btn1 {
        background: linear-gradient(269deg, #ff7944, #ff3a55);
      }
      .btn2 {
        background: #b3b3b3;
      }
    }
  }
}
</style>
